<div id="content">
  <div class="row">
    <sa-big-breadcrumbs [items]="['UI Elements', 'General Elemants']" icon="desktop"
                        class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
    <sa-stats></sa-stats>
  </div>


  <!-- widget grid -->

  <sa-widgets-grid>

    <!-- row -->
    <div class="row">

      <!-- NEW WIDGET START -->
      <article class="col-sm-12">

        <alert type="warning" dismissible="true">

          <i class="fa-fw fa fa-warning"></i>
          <strong>Warning</strong> Your monthly traffic is reaching limit.
        </alert>

        <alert type="success" dismissible="true">
          <i class="fa-fw fa fa-check"></i>
          <strong>Success</strong> The page has been added.
        </alert>

        <alert type="info" dismissible="true">
          <i class="fa-fw fa fa-info"></i>
          <strong>Info!</strong> You have 198 unread messages.
        </alert>

        <alert type="danger" dismissible="true">
          <i class="fa-fw fa fa-times"></i>
          <strong>Error!</strong> The daily cronjob has failed.
        </alert>

      </article>
      <!-- WIDGET END -->

    </div>

    <!-- end row -->

    <!-- row -->
    <div class="row">

      <!-- NEW WIDGET START -->
      <article class="col-sm-12">

        <!-- Widget ID (each widget will need unique ID)-->
        <sa-widget [colorbutton]="false" [editbutton]="false" [togglebutton]="false" [deletebutton]="false"
                   [fullscreenbutton]="false" [custombutton]="false" [sortable]="false" color="blueDark">
          <!-- widget options:
          usage: <sa-widget [editbutton]="false">

          [colorbutton]="false"
          [editbutton]="false"
          [togglebutton]="false"
          [deletebutton]="false"
          [fullscreenbutton]="false"
          [custombutton]="false"
          [collapsed]="true"
          [sortable]="false"

          -->
          <header>
            <span class="widget-icon"> <i class="fa fa-align-justify"></i> </span>
            <h2>Standard Progress Bars </h2>

          </header>

          <!-- widget div-->
          <div>


            <!-- widget content -->
            <div class="widget-body">
              <p class="alert alert-info no-margin">
                All progress bars contain a base class of
                <code>
                  .progress
                </code>
                . Control the size of the progress bar with
                <code>
                  .progress-xs
                </code>
                ,
                <code>
                  .progress-sm
                </code>
                ,
                <code>
                  .progress-lg
                </code>
                or leave as is for the default size.
              </p>

              <div class="row">

                <div class="col-sm-12">
                  <h3>Transitional Progress Bars</h3>
                  <p>
                    <span class="label bg-color-darken txt-color-white">JS required</span> This nifty animated progress
                    bars run on CSS combined with javascript
                  </p>
                  <p>
                    You will simply need to add in the value
                    <code>
                      data-transitiongoal="25"
                    </code>
                    after the <strong>.progress-bar</strong> class
                  </p>
                  <div class="row">

                    <div class="col-sm-6">

                      <p>
                        For right alignment add class
                        <code>
                          .progress .right
                        </code>
                      </p>
                      <div class="well no-padding">

                        <div class="bar-holder">
                          <div class="progress right" rel="tooltip" title="25%" data-placement="top">
                            <div class="progress-bar bg-color-teal" saProgressbar data-transitiongoal="25"></div>
                          </div>
                        </div>
                        <div class="bar-holder">
                          <div class="progress right">
                            <div class="progress-bar bg-color-blueLight" saProgressbar data-transitiongoal="50"></div>
                          </div>
                        </div>
                        <div class="bar-holder">
                          <div class="progress right">
                            <div class="progress-bar bg-color-blue" saProgressbar data-transitiongoal="75"></div>
                          </div>
                        </div>
                        <div class="bar-holder">
                          <div class="progress right">
                            <div class="progress-bar bg-color-redLight" saProgressbar data-transitiongoal="100"></div>
                          </div>
                        </div>

                      </div>
                    </div>

                    <div class="col-sm-6">
                      <p>
                        The default is left aligned.
                      </p>
                      <div class="well no-padding">

                        <div class="bar-holder">
                          <div class="progress">
                            <div class="progress-bar bg-color-teal" saProgressbar data-transitiongoal="25"></div>
                          </div>
                        </div>
                        <div class="bar-holder">
                          <div class="progress">
                            <div class="progress-bar bg-color-blueLight" saProgressbar data-transitiongoal="50"></div>
                          </div>
                        </div>
                        <div class="bar-holder">
                          <div class="progress">
                            <div class="progress-bar bg-color-blue" saProgressbar data-transitiongoal="75"></div>
                          </div>
                        </div>
                        <div class="bar-holder">
                          <div class="progress">
                            <div class="progress-bar bg-color-redLight" saProgressbar data-transitiongoal="100"></div>
                          </div>
                        </div>

                      </div>
                    </div>

                  </div>
                </div>

              </div>

              <hr class="simple">

              <div class="row">

                <div class="col-sm-12">
                  <h3>
                    <small>Transitional Progress Bars continued...</small>
                  </h3>
                  <div class="row">

                    <div class="col-sm-6 col-md-6 col-lg-3">
                      <p>
                        Add an overlapping div to progress-bar with the base css of
                        <code>
                          .progress .vertical
                        </code>
                      </p>

                      <div class="well no-padding">

                        <ul class="vertical-bars">
                          <li>
                            <div class="progress vertical">
                              <div class="progress-bar bg-color-teal" saProgressbar data-transitiongoal="25"></div>
                            </div>
                          </li>
                          <li>
                            <div class="progress vertical">
                              <div class="progress-bar bg-color-blueLight" saProgressbar data-transitiongoal="50"></div>
                            </div>
                          </li>
                          <li>
                            <div class="progress vertical">
                              <div class="progress-bar bg-color-blue" saProgressbar data-transitiongoal="75"></div>
                            </div>
                          </li>
                          <li>
                            <div class="progress vertical">
                              <div class="progress-bar bg-color-redLight" saProgressbar data-transitiongoal="100"></div>
                            </div>
                          </li>
                        </ul>

                      </div>
                    </div>

                    <div class="col-sm-6 col-md-6 col-lg-3">
                      <p>
                        Add an overlapping div to progress-bar with the base css of
                        <code>
                          .progress .vertical .bottom
                        </code>
                      </p>

                      <div class="well no-padding">
                        <ul class="vertical-bars">
                          <li>
                            <div class="progress vertical bottom">
                              <div class="progress-bar bg-color-teal" saProgressbar data-transitiongoal="25"></div>
                            </div>
                          </li>
                          <li>
                            <div class="progress vertical bottom">
                              <div class="progress-bar bg-color-blueLight" saProgressbar data-transitiongoal="50"></div>
                            </div>
                          </li>
                          <li>
                            <div class="progress vertical bottom">
                              <div class="progress-bar bg-color-blue" saProgressbar data-transitiongoal="75"></div>
                            </div>
                          </li>
                          <li>
                            <div class="progress vertical bottom">
                              <div class="progress-bar bg-color-redLight" saProgressbar data-transitiongoal="100"></div>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>

                    <div class="col-sm-6 col-md-6 col-lg-3">
                      <p>
                        Add an overlapping div to progress-bar with the base css of
                        <code>
                          .progress .vertical .wide-bar
                        </code>
                      </p>

                      <div class="well no-padding">

                        <ul class="vertical-bars">
                          <li>
                            <div class="progress vertical wide-bar">
                              <div class="progress-bar bg-color-teal" saProgressbar data-transitiongoal="25"></div>
                            </div>
                          </li>
                          <li>
                            <div class="progress vertical wide-bar">
                              <div class="progress-bar bg-color-blueLight" saProgressbar data-transitiongoal="50"></div>
                            </div>
                          </li>
                          <li>
                            <div class="progress vertical wide-bar">
                              <div class="progress-bar bg-color-blue" saProgressbar data-transitiongoal="75"></div>
                            </div>
                          </li>
                          <li>
                            <div class="progress vertical wide-bar">
                              <div class="progress-bar bg-color-redLight" saProgressbar data-transitiongoal="100"></div>
                            </div>
                          </li>
                        </ul>

                      </div>
                    </div>

                    <div class="col-sm-6 col-md-6 col-lg-3">

                      <p>
                        Add an overlapping div to progress-bar with the base css of
                        <code>
                          .bottom .wide-bar
                        </code>
                      </p>

                      <div class="well no-padding">
                        <ul class="vertical-bars">
                          <li>
                            <div class="progress vertical bottom wide-bar">
                              <div class="progress-bar bg-color-teal" saProgressbar data-transitiongoal="25"></div>
                            </div>
                          </li>
                          <li>
                            <div class="progress vertical bottom wide-bar">
                              <div class="progress-bar bg-color-blueLight" saProgressbar data-transitiongoal="50"></div>
                            </div>
                          </li>
                          <li>
                            <div class="progress vertical bottom wide-bar">
                              <div class="progress-bar bg-color-blue" saProgressbar data-transitiongoal="75"></div>
                            </div>
                          </li>
                          <li>
                            <div class="progress vertical bottom wide-bar">
                              <div class="progress-bar bg-color-redLight" saProgressbar data-transitiongoal="100"></div>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>

                  </div>
                </div>

              </div>

              <div class="row">
                <div class="col-sm-12">
                  <hr class="simple">
                  <h3>Default Progress Bars</h3>

                  <p>
                    Micro progress bar <code>
                    .progress-micro</code>
                    with
                    <code>
                      .progress-bar-primary
                    </code>

                  </p>
                  <div class="progress progress-micro">
                    <div class="progress-bar progress-bar-primary" role="progressbar" style="width: 44%;"></div>
                  </div>

                  <p>
                    Extra small progress bar <code>
                    .progress-xs</code>
                    with
                    <code>
                      .bg-color-blue
                    </code>
                    <span class="txt-color-blue pull-right"><i class="fa fa-lg fa-check"></i></span>
                  </p>
                  <div class="progress progress-xs">
                    <div class="progress-bar bg-color-blue" role="progressbar" style="width: 60%;"></div>
                  </div>

                  <p>
                    Small progress bar <code>
                    .progress-sm</code>
                    with
                    <code>
                      .bg-color-greenLight
                    </code>
                    <span class="txt-color-green pull-right"><i class="fa fa-save"></i></span>
                  </p>
                  <div class="progress progress-sm">
                    <div class="progress-bar bg-color-greenLight" role="progressbar" style="width: 40%"></div>
                  </div>

                  <p>
                    Default progress bar with
                    <code>
                      .bg-color-redLight
                    </code>
                    <span class="txt-color-red pull-right"><i class="fa fa-lg fa-times"></i></span>
                  </p>
                  <div class="progress">
                    <div class="progress-bar bg-color-redLight" role="progressbar" style="width: 60%"></div>
                  </div>

                  <p>
                    Large progress bars <code>
                    .progress-lg</code>
                    with
                    <code>
                      .bg-color-blueLight
                    </code>
                    <span class="txt-color-blueLight pull-right"><i class="fa fa-2x fa-check"></i></span>
                  </p>
                  <div class="progress progress-lg">
                    <div class="progress-bar bg-color-blueLight" role="progressbar" style="width: 80%"></div>
                  </div>
                  <hr class="simple">

                  <h3>Stripped Progress Bars</h3>
                  <p>
                    Sriped Progress bars made with CSS3 gradients, by adding the
                    <code>
                      .progress-striped
                    </code> class to the base class

                  </p>
                  <p>
                    <span class="label label-info">Info!</span> Please be aware that this will not work in archaic
                    browsers such as IE9 <span class="txt-color-purple pull-right"><i class="fa fa-warning"></i> 80% Complete</span>
                  </p>
                  <div class="progress">

                    <div class="progress progress-striped">
                      <div class="progress-bar bg-color-purple" role="progressbar" style="width: 77%"></div>
                    </div>

                  </div>

                  <p>
                    Activate and animate a progress bar by adding the class
                    <code>
                      .progress-striped .active
                    </code>
                  </p>
                  <p>
                    Dark progress bar with class
                    <code>
                      .bg-color-darken
                    </code>
                    <span class="txt-color-orange pull-right"><i class="fa fa-lg fa-times"></i></span>
                  </p>
                  <div class="progress progress-sm progress-striped active">
                    <div class="progress-bar bg-color-darken" role="progressbar" style="width: 45%"></div>
                  </div>
                  <hr class="simple">
                  <h3>Stacking Progress Bars</h3>
                  <p>
                    Stack one progressbar on top of another by including all in one
                    <code>
                      div.progress
                    </code>

                    <span class="sparkline inline-block pull-right" data-sparkline-type="pie"
                          data-sparkline-piecolor='["#71843f", "#c79121", "#a90329", "#ccc"]' data-sparkline-offset="90"
                          data-sparkline-piesize="23px"> 35,20,10,35 </span>

                  </p>
                  <div class="progress progress-sm">
                    <div class="progress-bar bg-color-greenLight" style="width: 35%"></div>
                    <div class="progress-bar bg-color-yellow" style="width: 20%"></div>
                    <div class="progress-bar bg-color-redLight" style="width: 10%"></div>
                  </div>

                </div>
              </div>

            </div>
            <!-- end widget body-->

          </div>
          <!-- end widget content -->

        </sa-widget>
        <!-- end widget -->

      </article>
      <!-- WIDGET END -->

    </div>

    <!-- end row -->

    <!-- row -->

    <div class="row">

      <h2 class="row-seperator-header"><i class="fa fa-plus"></i> Customized Tabs </h2>

      <!-- NEW WIDGET START -->
      <article class="col-sm-12 col-md-12 col-lg-6">

        <!-- Widget ID (each widget will need unique ID)-->
        <sa-widget class="well" [colorbutton]="false" [editbutton]="false" [togglebutton]="false" [deletebutton]="false"
                   [fullscreenbutton]="false" [custombutton]="false" [sortable]="false">
          <!-- widget options:
          usage: <sa-widget [editbutton]="false">

          [colorbutton]="false"
          [editbutton]="false"
          [togglebutton]="false"
          [deletebutton]="false"
          [fullscreenbutton]="false"
          [custombutton]="false"
          [collapsed]="true"
          [sortable]="false"

          -->
          <header>
            <span class="widget-icon"> <i class="fa fa-comments"></i> </span>
            <h2>Default Tabs with border </h2>

          </header>

          <!-- widget div-->
          <div>


            <!-- widget content -->
            <div class="widget-body">

              <p>
                Tabs inside
                <code>
                  .jarviswidget .well
                </code>
                (Bordered Tabs)
              </p>
              <hr class="simple">
              <ul id="myTab1" class="nav nav-tabs bordered">
                <li [class.active]="state.tabs.demo1 == 0">
                  <a (click)="state.tabs.demo1 = 0">Left Tab <span class="badge bg-color-blue txt-color-white">12</span></a>
                </li>
                <li [class.active]="state.tabs.demo1 == 1">
                  <a (click)="state.tabs.demo1 = 1"><i class="fa fa-fw fa-lg fa-gear"></i> Tab Item 2</a>
                </li>
                <li dropdown class="dropdown">
                  <a dropdownToggle>Dropdown <b class="caret"></b></a>
                  <ul *dropdownMenu class="dropdown-menu">
                    <li [class.active]="state.tabs.demo1 == 2">
                      <a (click)="state.tabs.demo1 = 2">@fat</a>
                    </li>
                    <li [class.active]="state.tabs.demo1 == 3">
                      <a (click)="state.tabs.demo1 = 3">@mdo</a>
                    </li>
                  </ul>
                </li>
                <li class="pull-right">
                  <a (click)="(null)">
                    <div class="sparkline txt-color-pinkDark text-align-right" data-sparkline-height="18px"
                         data-sparkline-width="90px" data-sparkline-barwidth="7">
                      5,10,6,7,4,3
                    </div>
                  </a>
                </li>
              </ul>

              <tabset class="padding-10">
                <tab [active]="state.tabs.demo1 == 0">
                  <p>
                    I have six locks on my door all in a row. When I go out, I lock every other one. I figure no matter
                    how long somebody stands there picking the locks, they are always locking three.
                  </p>
                </tab>
                <tab [active]="state.tabs.demo1 == 1">
                  <p>
                    Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
                    Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko
                    farm-to-table craft beer twee.
                  </p>
                </tab>
                <tab [active]="state.tabs.demo1 == 2">
                  <p>
                    Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo
                    retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft
                    beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy
                    irony.
                  </p>
                </tab>
                <tab [active]="state.tabs.demo1 == 3">
                  <p>
                    Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master
                    cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party
                    locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before
                    they sold out farm-to-table.
                  </p>
                </tab>
              </tabset>

            </div>
            <!-- end widget content -->

          </div>
          <!-- end widget div -->

        </sa-widget>
        <!-- end widget -->

        <!-- Widget ID (each widget will need unique ID)-->
        <sa-widget [colorbutton]="false" [editbutton]="false" [fullscreenbutton]="false" [custombutton]="false"
                   [sortable]="false">
          <!-- widget options:
          usage: <sa-widget [editbutton]="false">

          [colorbutton]="false"
          [editbutton]="false"
          [togglebutton]="false"
          [deletebutton]="false"
          [fullscreenbutton]="false"
          [custombutton]="false"
          [collapsed]="true"
          [sortable]="false"

          -->
          <header>
            <h2>Tabs left </h2>
            <div class="widget-toolbar hidden-phone">
              <div class="smart-form">
                <label class="toggle">
                  <input type="checkbox" id="demo-switch-to-pills" name="checkbox-toggle">
                  <i data-swchon-text="TRUE" data-swchoff-text="FALSE"></i>Switch Navs / Pills</label>
              </div>
            </div>
          </header>

          <!-- widget div-->
          <div>

            <!-- widget content -->
            <div class="widget-body">

              <div class="tabs-left">
                <ul class="nav nav-tabs tabs-left" id="demo-pill-nav">
                  <li [class.active]="state.tabs.demo2=='tab-r1'" class="active">
                    <a (click)="state.tabs.demo2 = 'tab-r1'"><span class="badge bg-color-blue txt-color-white">12</span>
                      Item 1 </a>
                  </li>
                  <li [class.active]="state.tabs.demo2=='tab-r2'">
                    <a (click)="state.tabs.demo2 = 'tab-r2'"><span
                      class="badge bg-color-blueDark txt-color-white">3</span> Item 2</a>
                  </li>
                  <li [class.active]="state.tabs.demo2=='tab-r3'">
                    <a (click)="state.tabs.demo2 = 'tab-r3'"><span
                      class="badge bg-color-greenLight txt-color-white">0</span> Item 3</a>
                  </li>
                </ul>
                <tabset>
                  <tab [active]="state.tabs.demo2 == 'tab-r1'">
                    <p>
                      Dear Math, please grow up and solve your own problems, I'm tired of solving them for you.
                    </p>

                    <p>
                      They say that love is more important than money, but have you ever tried to pay your bills with a
                      hug?
                    </p>
                  </tab>
                  <tab [active]="state.tabs.demo2 == 'tab-r2'">
                    <p>
                      Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo
                      retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft
                      beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy
                      irony.
                    </p>
                  </tab>
                  <tab [active]="state.tabs.demo2 == 'tab-r3'">
                    <p>
                      Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out
                      master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY,
                      art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR,
                      banh mi before they sold out farm-to-table.
                    </p>
                  </tab>
                </tabset>
              </div>

            </div>
            <!-- end widget content -->

          </div>
          <!-- end widget div -->

        </sa-widget>
        <!-- end widget -->

        <!-- Widget ID (each widget will need unique ID)-->
        <sa-widget [editbutton]="false" [fullscreenbutton]="false" [custombutton]="false" [sortable]="false">
          <!-- widget options:
          usage: <sa-widget [editbutton]="false">

          [colorbutton]="false"
          [editbutton]="false"
          [togglebutton]="false"
          [deletebutton]="false"
          [fullscreenbutton]="false"
          [custombutton]="false"
          [collapsed]="true"
          [sortable]="false"

          -->
          <header>
            <ul class="nav nav-tabs pull-left in">

              <li [class.active]="state.tabs.demo3=='hr1'">

                <a (click)="state.tabs.demo3 = 'hr1'"> <i class="fa fa-lg fa-arrow-circle-o-down"></i> <span
                  class="hidden-mobile hidden-tablet"> Bottom Tabs </span> </a>

              </li>

              <li [class.active]="state.tabs.demo3=='hr2'">
                <a (click)="state.tabs.demo3 = 'hr2'"> <i class="fa fa-lg fa-arrow-circle-o-up"></i> <span
                  class="hidden-mobile hidden-tablet"> Top Tabs <span
                  class="label bg-color-blue txt-color-white"> label <i class="fa fa-exclamation"></i> </span> </span>
                </a>
              </li>

            </ul>
          </header>

          <!-- widget div-->
          <div>


            <!-- widget content -->
            <div class="widget-body">

              <tabset>
                <tab [active]="state.tabs.demo3 == 'hr1'">

                  <div class="tabbable tabs-below">
                    <tabset class="padding-10">
                      <tab [active]="state.tabs.demo4 == 'AA'">
                        <p>
                          The broccoli says 'I look like a small tree', the mushroom says 'I look like an umbrella', the
                          walnut says 'I look like a brain', and the banana says 'Can we please change the subject?'
                        </p>
                      </tab>
                      <tab [active]="state.tabs.demo4 == 'BB'">
                        <p>
                          Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
                          Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four
                          loko farm-to-table craft beer twee.
                        </p>
                      </tab>
                      <tab [active]="state.tabs.demo4 == 'CC'">
                        <p>
                          Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out
                          master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan
                          DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia
                          PBR, banh mi before they sold out farm-to-table.
                        </p>
                      </tab>
                    </tabset>
                    <ul class="nav nav-tabs">
                      <li [class.active]="state.tabs.demo4=='AA'" class="active">
                        <a (click)="state.tabs.demo4 = 'AA'">Tab 1</a>
                      </li>
                      <li [class.active]="state.tabs.demo4=='BB'">
                        <a (click)="state.tabs.demo4 = 'BB'">Tab 2</a>
                      </li>
                      <li [class.active]="state.tabs.demo4=='CC'">
                        <a (click)="state.tabs.demo4 = 'CC'">Tab 3</a>
                      </li>
                    </ul>
                  </div>

                </tab>
                <tab [active]="state.tabs.demo3 == 'hr2'">

                  <ul class="nav nav-tabs">
                    <li [class.active]="state.tabs.demo5=='iss1'" class="active">
                      <a (click)="state.tabs.demo5 = 'iss1'">Item 1</a>
                    </li>
                    <li [class.active]="state.tabs.demo5=='iss2'">
                      <a (click)="state.tabs.demo5 = 'iss2'">Item 2</a>
                    </li>
                    <li [class.active]="state.tabs.demo5=='iss3'">
                      <a (click)="state.tabs.demo5 = 'iss3'">Item 3</a>
                    </li>
                  </ul>
                  <tabset class="padding-10">
                    <tab [active]="state.tabs.demo5 == 'iss1'">
                      <p>
                        Three monkeys escaped from the zoo, one was caught watching TV, the other playing hockey, and
                        the third one was caught reading this quote!
                      </p>
                    </tab>
                    <tab [active]="state.tabs.demo5 == 'iss2'">
                      <p>
                        Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
                        Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four
                        loko farm-to-table craft beer twee.
                      </p>
                    </tab>
                    <tab [active]="state.tabs.demo5 == 'iss3'">
                      <p>
                        Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out
                        master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan
                        DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia
                        PBR, banh mi before they sold out farm-to-table.
                      </p>
                    </tab>
                  </tabset>

                </tab>
              </tabset>

            </div>
            <!-- end widget content -->

          </div>
          <!-- end widget div -->

        </sa-widget>
        <!-- end widget -->

      </article>
      <!-- WIDGET END -->

      <!-- NEW WIDGET START -->
      <article class="col-sm-12 col-md-12 col-lg-6">

        <!-- Widget ID (each widget will need unique ID)-->
        <sa-widget class="jarviswidget well" [colorbutton]="false" [editbutton]="false" [togglebutton]="false"
                   [deletebutton]="false" [fullscreenbutton]="false" [custombutton]="false" [sortable]="false">
          <!-- widget options:
          usage: <sa-widget [editbutton]="false">

          [colorbutton]="false"
          [editbutton]="false"
          [togglebutton]="false"
          [deletebutton]="false"
          [fullscreenbutton]="false"
          [custombutton]="false"
          [collapsed]="true"
          [sortable]="false"

          -->
          <header>
            <span class="widget-icon"> <i class="fa fa-comments"></i> </span>
            <h2>My Data </h2>

          </header>

          <!-- widget div-->
          <div>


            <!-- widget content -->
            <div class="widget-body">
              <p>
                Tabs inside well and pulled right
                <code>
                  .tabs-pull-right
                </code>
                (Bordered Tabs)
              </p>
              <hr class="simple">

              <ul id="myTab3" class="nav nav-tabs tabs-pull-right bordered">
                <li [class.active]="state.tabs.demo6=='l1'" class="active">
                  <a (click)="state.tabs.demo6 = 'l1'">Tab Item 1 <span class="badge bg-color-pinkDark txt-color-white">99</span></a>
                </li>
                <li [class.active]="state.tabs.demo6=='l2'" class="pull-right">
                  <a (click)="state.tabs.demo6 = 'l2'">Tab Item 2</a>
                </li>
                <li class="dropdown pull-left" dropdown>
                  <a dropdownToggle><i class="fa fa-lg fa-gear"></i> <b class="caret"></b></a>
                  <ul *dropdownMenu class="dropdown-menu">
                    <li [class.active]="state.tabs.demo6=='l3'">
                      <a (click)="state.tabs.demo6 = 'l3'">@fat</a>
                    </li>
                    <li [class.active]="state.tabs.demo6=='l4'">
                      <a (click)="state.tabs.demo6 = 'l4'">@mdo</a>
                    </li>
                  </ul>
                </li>
              </ul>

              <tabset class="padding-10">
                <tab [active]="state.tabs.demo6 == 'l1'">
                  <p>
                    My therapist told me the way to achieve true inner peace is to finish what I start. So far I’ve
                    finished two bags of M&Ms and a chocolate cake. I feel better already.
                  </p>
                </tab>

                <tab [active]="state.tabs.demo6 == 'l2'">
                  <p>
                    Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
                    Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko
                    farm-to-table craft beer twee.
                  </p>
                </tab>
                <tab [active]="state.tabs.demo6 == 'l3'">
                  <p>
                    Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo
                    retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft
                    beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy
                    irony.
                  </p>
                </tab>
                <tab [active]="state.tabs.demo6 == 'l4'">
                  <p>
                    Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master
                    cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party
                    locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before
                    they sold out farm-to-table.
                  </p>
                </tab>
              </tabset>

            </div>
            <!-- end widget content -->

          </div>
          <!-- end widget div -->

        </sa-widget>
        <!-- end widget -->

        <!-- Widget ID (each widget will need unique ID)-->
        <sa-widget [colorbutton]="false" [editbutton]="false" [fullscreenbutton]="false" [custombutton]="false"
                   [sortable]="false">
          <!-- widget options:
          usage: <sa-widget [editbutton]="false">

          [colorbutton]="false"
          [editbutton]="false"
          [togglebutton]="false"
          [deletebutton]="false"
          [fullscreenbutton]="false"
          [custombutton]="false"
          [collapsed]="true"
          [sortable]="false"

          -->
          <header>
            <h2>Tabs right </h2>

          </header>

          <!-- widget div-->
          <div>

            <!-- widget edit box -->
            <div class="jarviswidget-editbox">
              <!-- This area used as dropdown edit box -->

            </div>
            <!-- end widget edit box -->

            <!-- widget content -->
            <div class="widget-body">

              <div class="tabs-right">
                <ul class="nav nav-tabs">
                  <li [class.active]="state.tabs.demo7=='tab1'" class="active">
                    <a (click)="state.tabs.demo7 = 'tab1'">Item 1 <span
                      class="badge bg-color-blue txt-color-white">12</span></a>
                  </li>
                  <li [class.active]="state.tabs.demo7=='tab2'">
                    <a (click)="state.tabs.demo7 = 'tab2'">Item 2 <span class="badge bg-color-blueDark txt-color-white">3</span></a>
                  </li>
                  <li [class.active]="state.tabs.demo7=='tab3'">
                    <a (click)="state.tabs.demo7 = 'tab3'">Item 3 <span
                      class="badge bg-color-greenLight txt-color-white">3</span></a>
                  </li>
                </ul>
                <tabset>
                  <tab [active]="state.tabs.demo7 == 'tab1'">
                    <p>
                      TEAM WORK: Having somebody else you can blame it on.
                      <br>
                      HARDWARE: The part of a computer you can kick when there are software problems.
                      <br>
                      IMPATIENT: Somebody who is waiting in a hurry.
                      <br>
                    </p>
                  </tab>
                  <tab [active]="state.tabs.demo7 == 'tab2'">
                    <p>
                      Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
                      Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four
                      loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk
                      aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic
                      magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown.
                      Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical
                      culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui
                      sapiente accusamus tattooed echo park.
                    </p>
                  </tab>
                  <tab [active]="state.tabs.demo7 == 'tab3'">
                    <p>
                      Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo
                      retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft
                      beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy
                      irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free,
                      carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't
                      heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
                    </p>
                  </tab>
                </tabset>
              </div>

            </div>
            <!-- end widget content -->

          </div>
          <!-- end widget div -->

        </sa-widget>
        <!-- end widget -->

        <!-- Widget ID (each widget will need unique ID)-->
        <sa-widget [colorbutton]="false" [editbutton]="false" [togglebutton]="false" [deletebutton]="false"
                   [fullscreenbutton]="false" [custombutton]="false" [sortable]="false">
          <!-- widget options:
          usage: <sa-widget [editbutton]="false">

          [colorbutton]="false"
          [editbutton]="false"
          [togglebutton]="false"
          [deletebutton]="false"
          [fullscreenbutton]="false"
          [custombutton]="false"
          [collapsed]="true"
          [sortable]="false"

          -->
          <header>
            <h2>Header Tabs Right</h2>
            <ul class="nav nav-tabs pull-right in">

              <li [class.active]="state.tabs.demo8=='hb1'">

                <a (click)="state.tabs.demo8 = 'hb1'"> <i class="fa fa-lg fa-arrow-circle-o-down"></i> <span
                  class="hidden-mobile hidden-tablet"> Bottom Tabs right </span> </a>

              </li>

              <li [class.active]="state.tabs.demo8=='hb2'">
                <a (click)="state.tabs.demo8 = 'hb2'"> <i class="fa fa-lg fa-arrow-circle-o-up"></i> <span
                  class="hidden-mobile hidden-tablet"> Top Tabs right <span
                  class="label bg-color-blue txt-color-white"> label <i class="fa fa-exclamation"></i> </span> </span>
                </a>
              </li>

            </ul>
          </header>

          <!-- widget div-->
          <div>
            <!-- widget content -->
            <div class="widget-body">

              <tabset>
                <tab [active]="state.tabs.demo8 == 'hb1'">

                  <div class="tabbable tabs-below">
                    <tabset class="padding-10">
                      <tab [active]="state.tabs.demo9 == 'A1'">
                        <p>
                          When I stare at the sky, I see you. When I stare out into the ocean, I see you. When I'm
                          looking at the moon, I see you. Geez! Would you move aside, you're constantly getting in my
                          way!
                        </p>
                      </tab>
                      <tab [active]="state.tabs.demo9 == 'B1'">
                        <p>
                          Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
                          Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four
                          loko farm-to-table craft beer twee.
                        </p>
                      </tab>
                      <tab [active]="state.tabs.demo9 == 'C1'">
                        <p>
                          Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out
                          master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan
                          DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia
                          PBR, banh mi before they sold out farm-to-table.
                        </p>
                      </tab>
                    </tabset>
                    <ul class="nav nav-tabs">
                      <li [class.active]="state.tabs.demo9=='A1'" class="pull-right">
                        <a (click)="state.tabs.demo9 = 'A1'">Tab 1</a>
                      </li>
                      <li [class.active]="state.tabs.demo9=='B1'" class="pull-right">
                        <a (click)="state.tabs.demo9 = 'B1'">Tab 2</a>
                      </li>
                      <li [class.active]="state.tabs.demo9=='C1'" class="pull-right">
                        <a (click)="state.tabs.demo9 = 'C1'">Tab 3</a>
                      </li>
                    </ul>
                  </div>

                </tab>
                <tab [active]="state.tabs.demo8 == 'hb2'">

                  <ul id="internal-tab-1" class="nav nav-tabs tabs-pull-right">
                    <li [class.active]="state.tabs.demo10=='is1'">
                      <a (click)="state.tabs.demo10 = 'is1'">Item 1</a>
                    </li>
                    <li [class.active]="state.tabs.demo10=='is2'">
                      <a (click)="state.tabs.demo10 = 'is2'">Item 2</a>
                    </li>
                    <li [class.active]="state.tabs.demo10=='is3'">
                      <a (click)="state.tabs.demo10 = 'is3'">Item 3</a>
                    </li>
                  </ul>
                  <tabset class="padding-10">
                    <tab [active]="state.tabs.demo10 == 'is1'">
                      <p>
                        I love everyone! I love to be around some people, I love to stay away from others, and some I'd
                        just love to punch right in the face!

                      </p>
                    </tab>
                    <tab [active]="state.tabs.demo10 == 'is2'">
                      <p>
                        Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
                        Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four
                        loko farm-to-table craft beer twee.
                      </p>
                    </tab>
                    <tab [active]="state.tabs.demo10 == 'is3'">
                      <p>
                        Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out
                        master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan
                        DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia
                        PBR, banh mi before they sold out farm-to-table.
                      </p>
                    </tab>
                  </tabset>

                </tab>
              </tabset>

            </div>
            <!-- end widget content -->

          </div>
          <!-- end widget div -->

        </sa-widget>
        <!-- end widget -->

      </article>
      <!-- WIDGET END -->

    </div>

    <!-- end row -->

    <!-- start row -->
    <div class="row">

      <h2 class="row-seperator-header"><i class="fa fa-th-list"></i> Accordions </h2>

      <!-- NEW WIDGET START -->
      <article class="col-sm-12 col-md-12 col-lg-6">

        <!-- Widget ID (each widget will need unique ID)-->
        <sa-widget [colorbutton]="false" [editbutton]="false" [togglebutton]="false"
                   [deletebutton]="false" [fullscreenbutton]="false" [custombutton]="false" [sortable]="false">
          <!-- widget options:
          usage: <sa-widget [editbutton]="false">

          [colorbutton]="false"
          [editbutton]="false"
          [togglebutton]="false"
          [deletebutton]="false"
          [fullscreenbutton]="false"
          [custombutton]="false"
          [collapsed]="true"
          [sortable]="false"

          -->
          <header>
            <span class="widget-icon"> <i class="fa fa-comments"></i> </span>
            <h2>Accordions </h2>

          </header>

          <!-- widget div-->
          <div>

            <!-- widget content -->
            <div class="widget-body">

              <div >
              <accordion class="smart-accordion-default panel-group" [closeOthers]="true">
                <accordion-group [isOpen]="true" #group1>
                  <h4 class="panel-title" accordion-heading><a><i class="pull-right fa fa-lg"
                                            [ngClass]="{'fa-angle-down': group1?.isOpen,
                                            'fa-angle-up': !group1?.isOpen}"></i>
                    Collapsible Group Item #1</a>
                  </h4>
                  <div class="no-padding">
                  <table class="table table-bordered table-condensed">
                        <thead>
                        <tr>
                          <th>Column name</th>
                          <th>Column name</th>
                          <th>Column name</th>
                          <th>Column name</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                          <td>Row 1</td>
                          <td>Row 2</td>
                          <td>Row 3</td>
                          <td>Row 4</td>
                        </tr>
                        <tr>
                          <td>Row 1</td>
                          <td>Row 2</td>
                          <td>Row 3</td>
                          <td>Row 4</td>
                        </tr>
                        <tr>
                          <td>Row 1</td>
                          <td>Row 2</td>
                          <td>Row 3</td>
                          <td>Row 4</td>
                        </tr>
                        </tbody>
                      </table>
                  </div>
                </accordion-group>
                <accordion-group #group2>
                  <h4 class="panel-title" accordion-heading><a><i class="pull-right fa fa-lg"
                                            [ngClass]="{'fa-angle-down': group2?.isOpen,
                                            'fa-angle-up': !group2?.isOpen}"></i>
                    Collapsible Group Item #2</a>
                  </h4>

                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
                      wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
                      eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
                      assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
                      nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
                      farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
                      labore sustainable VHS.

                </accordion-group>
                <accordion-group #group3>
                  <h4 class="panel-title" accordion-heading><a><i class="pull-right fa fa-lg"
                                            [ngClass]="{'fa-angle-down': group3?.isOpen,
                                            'fa-angle-up': !group3?.isOpen}"></i>
                    Collapsible Group Item #3</a>
                  </h4>

                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
                      wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
                      eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
                      assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
                      nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
                      farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
                      labore sustainable VHS.
                </accordion-group>
              </accordion>
              </div>


            </div>
            <!-- end widget content -->

          </div>
          <!-- end widget div -->

        </sa-widget>
        <!-- end widget -->

      </article>
      <!-- WIDGET END -->

      <!-- NEW WIDGET START -->
      <article class="col-sm-12 col-md-12 col-lg-6">

        <!-- Widget ID (each widget will need unique ID)-->
        <sa-widget [colorbutton]="false" [editbutton]="false" [togglebutton]="false" [deletebutton]="false"
                   [fullscreenbutton]="false" [custombutton]="false" [sortable]="false" color="blueLight">
          <!-- widget options:
          usage: <sa-widget [editbutton]="false">

          [colorbutton]="false"
          [editbutton]="false"
          [togglebutton]="false"
          [deletebutton]="false"
          [fullscreenbutton]="false"
          [custombutton]="false"
          [collapsed]="true"
          [sortable]="false"

          -->
          <header>
            <span class="widget-icon"> <i class="fa fa-list-alt"></i> </span>
            <h2>Inside a widget </h2>

            <div class="widget-toolbar hidden-phone">
              <div class="smart-form">
                <label class="checkbox">
                  <input type="checkbox" #checkbox name="checkbox">
                  <i></i>Add Padding</label>
              </div>
            </div>

          </header>

          <!-- widget div-->
          <div>

            <!-- widget content -->
            <div class="widget-body" [ngClass]="{'no-padding': !checkbox.checked}">

              <accordion class="smart-accordion-default panel-group" [closeOthers]="true">
                <accordion-group [isOpen]="true" #group4>

                  <h4 class="panel-title" accordion-heading><a><i class="fa fa-fw"
                                                                  [ngClass]="{'fa-minus-circle txt-color-red': group4?.isOpen,
                                            'fa-plus-circle txt-color-green': !group4?.isOpen}"></i> Collapsible Group Item #1</a>
                  </h4>

                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
                  wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
                  eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
                  assumenda shoreditch et.
                </accordion-group>
                <accordion-group #group5>
                  <h4 class="panel-title" accordion-heading><a><i class="fa fa-fw"
                                                                  [ngClass]="{'fa-minus-circle txt-color-red': group5?.isOpen,
                                            'fa-plus-circle txt-color-green': !group5?.isOpen}"></i> Collapsible Group Item #2</a>
                  </h4>


                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
                  wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
                  eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
                  assumenda shoreditch et.
                </accordion-group>
                <accordion-group #group6>
                  <h4 class="panel-title" accordion-heading><a><i class="fa fa-fw"
                                                                  [ngClass]="{'fa-minus-circle txt-color-red': group6?.isOpen,
                                            'fa-plus-circle txt-color-green': !group6?.isOpen}"></i> Collapsible Group Item #3</a>
                  </h4>


                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
                  wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
                  eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
                  assumenda shoreditch et.
                </accordion-group>
              </accordion>

            </div>
            <!-- end widget content -->

          </div>
          <!-- end widget div -->

        </sa-widget>
        <!-- end widget -->

      </article>
      <!-- WIDGET END -->

    </div>

    <!-- end row -->

    <!-- start row -->

    <div class="row">

      <h2 class="row-seperator-header"><i class="fa fa-reorder"></i> Default Nav Bars </h2>

      <article class="col-sm-12">

        <div class="navbar navbar-default">

          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" (click)="(null)">Brand</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li class="active">
                <a (click)="(null)">Link</a>
              </li>
              <li>
                <a (click)="(null)">Link</a>
              </li>
              <li dropdown class="dropdown dropdown-large">
                <a dropdownToggle>Large Dropdown <b class="caret"></b></a>

                <ul *dropdownMenu class="dropdown-menu dropdown-menu-large row">
                  <li class="col-sm-3">
                    <ul>
                      <li class="dropdown-header">
                        Glyphicons
                      </li>
                      <li>
                        <a (click)="(null)">Available glyphs</a>
                      </li>
                      <li class="disabled">
                        <a (click)="(null)">How to use</a>
                      </li>
                      <li>
                        <a (click)="(null)">Examples</a>
                      </li>
                      <li class="divider"></li>
                      <li class="dropdown-header">
                        Dropdowns
                      </li>
                      <li>
                        <a (click)="(null)">Example</a>
                      </li>
                      <li>
                        <a (click)="(null)">Aligninment options</a>
                      </li>
                      <li>
                        <a (click)="(null)">Headers</a>
                      </li>
                      <li>
                        <a (click)="(null)">Disabled menu items</a>
                      </li>
                    </ul>
                  </li>
                  <li class="col-sm-3">
                    <ul>
                      <li class="dropdown-header">
                        Button groups
                      </li>
                      <li>
                        <a (click)="(null)">Basic example</a>
                      </li>
                      <li>
                        <a (click)="(null)">Button toolbar</a>
                      </li>
                      <li>
                        <a (click)="(null)">Sizing</a>
                      </li>
                      <li>
                        <a (click)="(null)">Nesting</a>
                      </li>
                      <li>
                        <a (click)="(null)">Vertical variation</a>
                      </li>
                      <li class="divider"></li>
                      <li class="dropdown-header">
                        Button dropdowns
                      </li>
                      <li>
                        <a (click)="(null)">Single button dropdowns</a>
                      </li>
                    </ul>
                  </li>
                  <li class="col-sm-3">
                    <ul>
                      <li class="dropdown-header">
                        Input groups
                      </li>
                      <li>
                        <a (click)="(null)">Basic example</a>
                      </li>
                      <li>
                        <a (click)="(null)">Sizing</a>
                      </li>
                      <li>
                        <a (click)="(null)">Checkboxes and radio addons</a>
                      </li>
                      <li class="divider"></li>
                      <li class="dropdown-header">
                        Navs
                      </li>
                      <li>
                        <a (click)="(null)">Tabs</a>
                      </li>
                      <li>
                        <a (click)="(null)">Pills</a>
                      </li>
                      <li>
                        <a (click)="(null)">Justified</a>
                      </li>
                    </ul>
                  </li>
                  <li class="col-sm-3">
                    <ul>
                      <li class="dropdown-header">
                        Navbar
                      </li>
                      <li>
                        <a (click)="(null)">Default navbar</a>
                      </li>
                      <li>
                        <a (click)="(null)">Buttons</a>
                      </li>
                      <li>
                        <a (click)="(null)">Text</a>
                      </li>
                      <li>
                        <a (click)="(null)">Non-nav links</a>
                      </li>
                      <li>
                        <a (click)="(null)">Component alignment</a>
                      </li>
                      <li>
                        <a (click)="(null)">Fixed to top</a>
                      </li>
                      <li>
                        <a (click)="(null)">Fixed to bottom</a>
                      </li>
                      <li>
                        <a (click)="(null)">Static top</a>
                      </li>
                      <li>
                        <a (click)="(null)">Inverted navbar</a>
                      </li>
                    </ul>
                  </li>
                </ul>

              </li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
              </div>
              <button type="submit" class="btn btn-default">
                Submit
              </button>
            </form>
            <ul class="nav navbar-nav navbar-right">
              <li>
                <a (click)="(null)">Link</a>
              </li>
              <li dropdown class="dropdown">
                <a (click)="(null)" dropdownToggle>Dropdown <span class="caret"></span></a>
                <ul *dropdownMenu class="dropdown-menu" role="menu">
                  <li>
                    <a (click)="(null)">Action</a>
                  </li>
                  <li>
                    <a (click)="(null)">Another action</a>
                  </li>
                  <li>
                    <a (click)="(null)">Something else here</a>
                  </li>
                  <li class="divider"></li>
                  <li>
                    <a (click)="(null)">Separated link</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div><!-- /.navbar-collapse -->

        </div>

        <div class="navbar navbar-inverse">

          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-2">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" (click)="(null)">Brand</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
            <ul class="nav navbar-nav">
              <li class="active">
                <a (click)="(null)">Link</a>
              </li>

              <li>
                <a (click)="(null)">Link</a>
              </li>
            </ul>

            <form class="navbar-form navbar-right" role="search">
              <div class="form-group">
                <input class="form-control" placeholder="Search" type="text">
              </div>
              <button class="btn btn-primary" type="submit">
                Submit
              </button>
            </form>
          </div><!-- /.navbar-collapse -->

        </div>

      </article>

    </div>

    <!-- end row -->

    <!-- start row -->

    <div class="row">
      <br>
      <br>
      <h2 class="row-seperator-header"><i class="fa fa-tag"></i> Labels and Badges </h2>

      <div class="col-sm-12">

        <!-- well -->
        <div class="well">
          <!-- row -->
          <div class="row">
            <!-- col -->
            <div class="col-sm-12">
              <p class="alert alert-info">
                <i class="fa fa-info"></i> Did you know you can add more than just the basic colors to customize your
                badge? <strong>Learn more about color options modifiers on the <a href="typography.html">Typography
                page</a>! </strong>
              </p>
              <!-- row -->
              <div class="row">

                <div class="col-md-6">
                  <p>
                    Add any of the below mentioned modifier classes to change the appearance of a label.
                  </p>

                  <table class="table table-bordered">
                    <thead>
                    <tr>
                      <th style="width:50%">Classes</th>
                      <th style="width:50%">Labels</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                      <td>
                        <code>
                          .label-default
                        </code></td>
                      <td><span class="label label-default">Default</span></td>
                    </tr>
                    <tr>
                      <td>
                        <code>
                          .label-primary
                        </code></td>
                      <td><span class="label label-primary">Primary</span></td>
                    </tr>
                    <tr>
                      <td>
                        <code>
                          .label-success
                        </code></td>
                      <td><span class="label label-success">Success</span></td>
                    </tr>
                    <tr>
                      <td>
                        <code>
                          .label-info
                        </code></td>
                      <td><span class="label label-info">Info</span></td>
                    </tr>
                    <tr>
                      <td>
                        <code>
                          .label-warning
                        </code></td>
                      <td><span class="label label-warning">Warning</span></td>
                    </tr>
                    <tr>
                      <td>
                        <code>
                          .label-danger
                        </code></td>
                      <td><span class="label label-danger">Danger</span></td>
                    </tr>
                    </tbody>
                  </table>
                </div>

                <div class="col-md-6">
                  <p>
                    Add any of the below mentioned modifier classes to change the appearance of a badge.
                  </p>
                  <table class="table table-bordered">
                    <thead>
                    <tr>
                      <th style="width:50%">Classes</th>
                      <th style="width:50%">Badges</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                      <td>No modifiers</td>
                      <td><span class="badge">42</span></td>
                    </tr>
                    <tr>
                      <td>
                        <code>
                          .bg-color-darken
                        </code></td>
                      <td><span class="badge bg-color-darken">1</span></td>
                    </tr>
                    <tr>
                      <td>
                        <code>
                          .bg-color-greenLight
                        </code></td>
                      <td><span class="badge bg-color-greenLight">22</span></td>
                    </tr>
                    <tr>
                      <td>
                        <code>
                          .bg-color-blueLight
                        </code></td>
                      <td><span class="badge bg-color-blueLight">30</span></td>
                    </tr>
                    <tr>
                      <td>
                        <code>
                          .bg-color-orange
                        </code></td>
                      <td><span class="badge bg-color-orange">412</span></td>
                    </tr>
                    <tr>
                      <td>
                        <code>
                          .bg-color-red
                        </code></td>
                      <td><span class="badge bg-color-red">999</span></td>
                    </tr>
                    </tbody>
                  </table>
                </div>

              </div>
              <!-- end row -->
            </div>
            <!-- end col -->
          </div>
          <!-- end row -->
        </div>
        <!-- end well -->

      </div>

    </div>

    <!-- end row -->

    <!-- start row -->

    <div class="row">

      <h2 class="row-seperator-header"><i class="fa fa-comments"></i> Block Messages </h2>

      <div class="col-sm-12">

        <alert type="warning" dismissible="true">
          <h4 class="alert-heading">Warning!</h4>
          Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo
          cursus magna, vel scelerisque nisl consectetur et.
        </alert>

        <alert type="success" dismissible="true">
          <h4 class="alert-heading">Success!</h4>
          Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo
          cursus magna, vel scelerisque nisl consectetur et.
        </alert>

        <alert type="info" dismissible="true">
          <h4 class="alert-heading">Info!</h4>
          Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo
          cursus magna, vel scelerisque nisl consectetur et.
        </alert>

        <alert type="danger" dismissible="true">
          <h4 class="alert-heading">Error!</h4>
          Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo
          cursus magna, vel scelerisque nisl consectetur et.
          <p class="text-align-left">
            <br>
            <a (click)="(null)" class="btn btn-sm btn-default"><strong>Action Button</strong></a>
          </p>
        </alert>

      </div>

    </div>
    <!-- end row-->

    <!-- start row -->
    <div class="row">

      <h2 class="row-seperator-header"><i class="glyphicon glyphicon-picture"></i> Carousel Slide / Fade </h2>

      <div class="col-sm-12">

        <div class="row">

          <div class="col-sm-12 col-md-12 col-lg-6">

            <!-- well -->
            <div class="well">
              <h3>Carousel <code>
                .slide</code></h3>
              <p>
                Default sliding carousel with base class of <code>
                .carousel .slide</code>
              </p>
              <carousel [interval]="state.carousel.demo1.interval"
                        [noWrap]="state.carousel.demo1.noWrap">
                <slide *ngFor="let slide of state.carousel.demo1.slides"
                       [active]="slide.active">
                  <img [src]="slide.src" style="margin:auto;">

                  <div class="carousel-caption">
                    <h4>Slide {{index}}</h4>

                    <p>{{slide.text}}</p>
                  </div>
                </slide>
              </carousel>

            </div>
            <!-- end well-->

          </div>

          <div class="col-sm-12 col-md-12 col-lg-6">

            <!-- well -->
            <div class="well">
              <h3>Carousel <code>
                .fade</code></h3>
              <p>
                To make the carasoul fade, you can use the class <code>
                .carousel .fade</code>
              </p>

              <carousel [interval]="state.carousel.demo2.interval"
                        [noWrap]="state.carousel.demo2.noWrap">
                <slide *ngFor="let slide of state.carousel.demo2.slides"
                       [active]="slide.active">
                  <img [src]="slide.src" style="margin:auto;">

                  <div class="carousel-caption">
                    <h4>Slide {{index}}</h4>

                    <p>{{slide.text}}</p>
                  </div>
                </slide>
              </carousel>

            </div>
            <!-- end well -->

          </div>

        </div>

      </div>

    </div>
    <!-- end row -->

    <!-- start row -->
    <div class="row">

      <h2 class="row-seperator-header"><i class="fa fa-warning"></i> Alerts and Notifications </h2>

      <div class="col-sm-12">
        <div class="row">

          <div class="col-sm-12 col-md-12 col-lg-6">
            <!-- well -->
            <div class="well">
              <h3>Bootstrap Modal</h3>
              <h5>Static Example</h5>
              <p>
                A rendered modal with header, body, and set of actions in the footer.
              </p>


              <div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" (click)="lgModal.hide()" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                      <h4 class="modal-title">Large modal</h4>
                    </div>
                    <div class="modal-body">
                      ...
                    </div>
                  </div>
                </div>
              </div>


              <h5>Live Demo</h5>
              <p>
                Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top
                of the page.
              </p>

              <button class="btn btn-primary btn-lg" (click)="lgModal.show()">
                Launch demo modal
              </button>
              <h3 class="hidden-mobile">Options</h3>

              <div class="table-responsive">

                <table class="table table-bordered table-striped hidden-mobile">
                  <thead>
                  <tr>
                    <th>Name</th>
                    <th>type</th>
                    <th>default</th>
                    <th>description</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td>backdrop</td>
                    <td>boolean or the string
                      <code>
                        'static'
                      </code></td>
                    <td>true</td>
                    <td>Includes a modal-backdrop element. Alternatively, specify
                      <code>
                        static
                      </code> for a backdrop which doesn't close the modal on click.
                    </td>
                  </tr>
                  <tr>
                    <td>keyboard</td>
                    <td>boolean</td>
                    <td>true</td>
                    <td>Closes the modal when escape key is pressed</td>
                  </tr>
                  <tr>
                    <td>show</td>
                    <td>boolean</td>
                    <td>true</td>
                    <td>Shows the modal when initialized.</td>
                  </tr>
                  <tr>
                    <td>remote</td>
                    <td>path</td>
                    <td>false</td>
                    <td>
                      <p>
                        If a remote URL is provided, content will be loaded via jQuery's
                        <code>
                          load
                        </code>
                        method and injected into the root of the modal element. If you're using the data-api, you may
                        alternatively use the
                        <code>
                          href
                        </code>
                        attribute to specify the remote source. An example of this is shown below:
                      </p></td>

                  </tr>

                  <tr>
                    <td colspan="4"><pre><code class="html"><span class="nt">&lt;a</span> <span
                        class="na">data-toggle=</span><span class="s">"modal"</span> <span
                        class="na">href=</span><span
                        class="s">"remote.html"</span> <span class="na">data-target=</span><span
                        class="s">"#modal"</span><span class="nt">&gt;</span>Click me<span class="nt">&lt;/a&gt;</span></code></pre></td>
                  </tr>
                  </tbody>
                </table>



              </div>
            </div>
            <!-- end well-->

          </div>

          <div class="col-sm-12 col-md-12 col-lg-6">

            <!-- well -->
            <div class="well">
              <h3>Smart Notifications
                <small>with sound</small>
              </h3>
              <h5>Big box
                <small>(Static Example)</small>
              </h5>
              <p>
                Clutter free dynamic alert box, easy to configure and setup!
              </p>
              <p>
                <span class="label label-info"><i class="fa fa-music"></i> Sound Enabled</span>
              </p>

              <div class="text-center">
                <img src="assets/img/demo/demo-smartbig-alert.png" alt="demo" class="img-responsive">
              </div>

              <h5>Live Demo</h5>
              <p class="note">
                <span class="label bg-color-darken txt-color-white">INFO!</span> Messages are tabbale and does not
                overpopulate the user screen. Sounds can also be disabled if not needed
              </p>

              <ul class="demo-btns">
                <li>
                  <a (click)="notificationExample1()" class="btn btn-primary"> <i class="fa fa-warning"></i> Example 1
                  </a>
                </li>
                <li>
                  <a (click)="notificationExample2()" class="btn btn-primary"> <i class="fa fa-bell"></i> Example 2 </a>
                </li>
                <li>
                  <a (click)="notificationExample3()" class="btn btn-primary"> <i class="fa fa-shield"></i> Example 3
                  </a>
                </li>
                <li>
                  <a (click)="notificationExample4()" class="btn btn-primary"> <i class="fa fa-check"></i> Example 4
                  </a>
                </li>
              </ul>

              <h5>Small box alert</h5>

              <ul class="demo-btns">
                <li>
                  <button type="button" (click)="notificationExample5()" class="btn btn-default">
                    With button
                  </button>
                </li>
                <li>
                  <button type="button" (click)="notificationExample6()" class="btn btn-default">
                    With Icon
                  </button>
                </li>
              </ul>
              <p class="note">
                Easily customize the alerts to any colors of your choice, and add any icons from the theme library with
                animation!
              </p>

              <h5>
                <small>Extra Small Box</small>
              </h5>
              <ul class="demo-btns">
                <li>
                  <button type="button" (click)="notificationExample7()" class="btn btn-default">
                    <i class="fa fa-thumbs-up"></i> Extra Small Alert
                  </button>
                </li>
              </ul>
              <p class="note">
                Go even tinier with smaller attention messages!
              </p>

            </div>
            <!-- end well -->

            <!-- well -->
            <div class="well">

              <h3>Smart Alert
                <small>with sound</small>
              </h3>

              <h5 class="text-success">With Callback and Buttons
                <small>(Dynamic Example)</small>
              </h5>
              <ul class="demo-btns">
                <li>
                  <a (click)="smartModEg1()" class="btn btn-success"> Callback ()</a>
                </li>
                <li>
                  <a (click)="smartModEg3()" class="btn btn-success"> Many Buttons </a>
                </li>
              </ul>
              <h5 class="text-primary">With Input and Select</h5>
              <ul class="demo-btns">
                <li>
                  <a (click)="smartModEg2()" class="btn btn-primary"> With Input </a>
                </li>
                <li>
                  <a (click)="smartModEg4()" class="btn btn-primary"> With Select </a>
                </li>
              </ul>
              <h5>Log me in example</h5>
              <ul class="demo-btns">
                <li>
                  <a (click)="smartModEg5()" class="btn btn-danger"> Login me in </a>
                </li>
              </ul>

            </div>
            <!-- end well -->

          </div>

        </div>
      </div>

    </div>
    <!-- end row -->

    <!-- start row -->
    <div class="row">

      <h2 class="row-seperator-header"><i class="fa fa-question"></i> Tooltips and Popovers </h2>

      <div class="col-sm-12">

        <div class="row">

          <div class="col-sm-12 col-md-12 col-lg-6">

            <div class="well">
              <h3>Tooltips</h3>
              <p>
                Tip your users with a small tooltip. Nifty helpful information can be disaplayed using this very simple
                and yet effictive component. Display pure <strong>HTML Content</strong>, <strong> Images</strong> and
                <strong>Icons</strong>
              </p>
              <br>

              <ul class="demo-btns text-center">
                <li>
                  <ng-template #tipContent1><h1><b>One</b> <em>Really</em> big tip!</h1></ng-template><a (click)="(null)" class="btn btn-default btn-lg" placement="top"
                     [tooltip]="tipContent1">Big Tip</a>
                </li>
                <li>
                  <ng-template #tipContent2><i class="fa fa-check fa-3x text-success"></i> <i class="fa fa-times fa-3x text-danger"></i></ng-template><a (click)="(null)" class="btn btn-default btn-lg" placement="top"
                     [tooltip]="tipContent2">has
                    Icon</a>
                </li>
                <li>
                  <ng-template #tipContent3><img src="assets/img/avatars/sunny.png" alt="me" class="online"></ng-template><a (click)="(null)" class="btn btn-default btn-lg" placement="top"
                     [tooltip]="tipContent3">also Image</a>
                </li>
              </ul>

              <ul class="demo-btns text-center">
                <li>
                  <a (click)="(null)" class="btn btn-default" placement="left" tooltip="Tooltip Left"><i
                    class="fa fa-arrow-left"></i> Tooltip Left</a>
                </li>
                <li>
                  <a (click)="(null)" class="btn btn-default" placement="top" tooltip="Tooltip Top"><i
                    class="fa fa-arrow-up"></i> Tooltip Top</a>
                </li>
                <li>
                  <a (click)="(null)" class="btn btn-default" placement="bottom"
                     tooltip="Tooltip Bottom"><i class="fa fa-arrow-down"></i> Tooltip Bottom</a>
                </li>
                <li>
                  <ng-template #tipContent4><i class="fa fa-check text-success"></i> Tooltip right</ng-template><a (click)="(null)" class="btn btn-default" placement="right"
                     [tooltip]="tipContent4"><i
                    class="fa fa-arrow-right"></i>
                    Tooltip Right</a>
                </li>
              </ul>

            </div>

          </div>

          <div class="col-sm-12 col-md-12 col-lg-6">

            <div class="well">
              <h3>Popovers</h3>
              <p>
                Popovers are a cool way to express compressed information to the user, neatly and quickly. You can
                generate all kinds of content within the popover component. Including <strong>Forms</strong>, <strong>Tabs</strong>,
                <strong>Images</strong> and even <strong>Google map</strong>!
              </p>
              <br>
              <ul class="demo-btns text-center">
                <li>
                  <a (click)="(null)" class="btn btn-default btn-lg" popoverPlacement="top" [popoverOnHover]="true"
                     popoverTitle="Popover activated on hover"
                     popover="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum."><strong>On</strong>
                    <i>Hover</i></a>
                </li>
                <li>
                  <popover-content #myPopover
                                   title="this header can be omitted"
                                   [closeOnClickOutside]="true">
                    <b>Very</b> <span style="color: #C21F39">Dynamic</span> <span style="color: #00b3ee">Reusable</span>
                    <b><i><span style="color: #ffc520">Popover With</span></i></b>
                    <small>Html support</small>
                    .
                    Click outside of this popover and it will be dismissed automatically.
                  </popover-content>
                  <a class="btn btn-default btn-lg"  popoverPlacement="top"
                     [popover]="myPopover"><strong>Active</strong> <i>Content</i></a>

                </li>
                <li>

                  <popover-content #formPopoverContent
                                   title="Form inside popover"
                                   [closeOnClickOutside]="true">
                    <form action='/api/plug' style='min-width:170px'><div class='checkbox'><label><input type='checkbox' class='checkbox style-0' checked='checked'><span>Read</span></label></div><div class='checkbox'><label><input type='checkbox' class='checkbox style-0'><span>Write</span></label></div><div class='checkbox'><label><input type='checkbox' class='checkbox style-0'><span>Execute</span></label></div><div class='form-actions'><div class='row'><div class='col-md-12'><button class='btn btn-primary btn-sm' type='submit'>SAVE</button></div></div></div></form>
                  </popover-content>

                  <a class="btn btn-default btn-lg"  popoverPlacement="top"
                    [popover]="formPopoverContent"><strong>File</strong> <i>Access</i></a>
                </li>
              </ul>

              <ul class="demo-btns text-center">
                <li>
                  <a (click)="(null)" class="btn btn-default" popoverPlacement="left" popoverTitle="Popover Left"
                     popover="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum."><i
                    class="fa fa-arrow-left"></i> <strong>Popover</strong> <i>Left</i></a>
                </li>
                <li>
                  <a (click)="(null)" class="btn btn-default" popoverPlacement="top" popoverTitle="Popover Up"
                     popover="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum."><i
                    class="fa fa-arrow-up"></i> <strong>Popover</strong> <i>Up</i></a>
                </li>
                <li>
                  <a (click)="(null)" class="btn btn-default" popoverPlacement="bottom" popoverTitle="Popover Down"
                     popover="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum."><i
                    class="fa fa-arrow-down"></i> <strong>Popover</strong> <i>Down</i></a>
                </li>
                <li>
                  <a (click)="(null)" class="btn btn-default" popoverPlacement="right" popoverTitle="Popover Right"
                     popover="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum."><i
                    class="fa fa-arrow-right"></i> <strong>Popover</strong> <i>Right</i></a>
                </li>
              </ul>

            </div>

          </div>
        </div>

      </div>

    </div>
    <!-- end row -->

    <!-- start row -->
    <div class="row">
      <h2 class="row-seperator-header"><i class="fa fa-square-o"></i> Containers, Media and Pagination</h2>
      <div class="col-sm-12 col-md-12 col-lg-6">

        <div class="well">

          <h3>Jumbotron
            <small>Gets your user attention!</small>
          </h3>

          <div class="jumbotron">
            <h1>Hello, world!</h1>
            <p>
              This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured
              content or information.
            </p>
            <p>
              <a class="btn btn-primary btn-lg" role="button">Learn more</a>
            </p>
          </div>

          <h3>Wells
            <small>Notice the well sizes</small>
          </h3>

          <div class="well well-lg">
            Large well
            <br>
            <code>
              .well .well-lg</code>
          </div>

          <div class="well ">
            Default well
            <br>
            <code>
              .well</code>
          </div>

          <div class="well well-sm well-light">
            Small well with light background
            <br>
            <code>
              .well .well-sm .well-light</code>
          </div>

          <div class="row">

            <div class="col-sm-4">

              <div class="well well-sm bg-color-darken txt-color-white text-center">
                <h5>Well with background</h5>
                <code>
                  .bg-color-darken</code>
              </div>

            </div>

            <div class="col-sm-4">

              <div class="well well-sm bg-color-teal txt-color-white text-center">
                <h5>Well with background</h5>
                <code>
                  .bg-color-teal</code>
              </div>

            </div>

            <div class="col-sm-4">

              <div class="well well-sm bg-color-pinkDark txt-color-white text-center">
                <h5>Well with background</h5>
                <code>
                  .bg-color-pinkDark</code>
              </div>

            </div>

          </div>
          <p>
            Learn more about other colors that you can use for .well by going to <a [routerLink]="['/ui/typography']"> typography
            page</a>
          </p>

        </div>

      </div>

      <div class="col-sm-12 col-md-12 col-lg-6">

        <div class="well">

          <h3>Media</h3>

          <ul class="media-list">
            <li class="media">
              <a class="pull-left" (click)="(null)"> <img class="media-object" alt="64x64" src="assets/img/demo/64x64.png">
              </a>
              <div class="media-body">
                <h4 class="media-heading">Media heading</h4>
                <p>
                  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
                  Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                </p>
                <!-- Nested media object -->
                <div class="media">
                  <a class="pull-left" (click)="(null)"> <img class="media-object" alt="64x64" src="assets/img/demo/64x64.png">
                  </a>
                  <div class="media-body">
                    <h4 class="media-heading">Nested media heading</h4>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
                    Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                    <!-- Nested media object -->
                    <div class="media">
                      <a class="pull-left" (click)="(null)"> <img class="media-object" alt="64x64"
                                                                  src="assets/img/demo/64x64.png"> </a>
                      <div class="media-body">
                        <h4 class="media-heading">Nested media heading</h4>
                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
                        commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Nested media object -->
                <div class="media">
                  <a class="pull-left" (click)="(null)"> <img class="media-object" alt="64x64" src="assets/img/demo/64x64.png">
                  </a>
                  <div class="media-body">
                    <h4 class="media-heading">Nested media heading</h4>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
                    Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                  </div>
                </div>
              </div>
            </li>
            <li class="media">
              <a class="pull-left" (click)="(null)"> <img class="media-object" alt="64x64" src="assets/img/demo/64x64.png">
              </a>
              <div class="media-body">
                <h4 class="media-heading">Media heading</h4>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
                purus odio, vestibulum in vulputate at, tempus viverra turpis.
              </div>
            </li>
          </ul>

        </div>

        <div class="well well-light">
          <h3>Pagination
            <small>two different styles</small>
          </h3>
          <div class="text-center">
            <ul class="pagination pagination-lg">
              <li>
                <a (click)="(null)"><i class="fa fa-chevron-left"></i></a>
              </li>
              <li class="active">
                <a (click)="(null)">1</a>
              </li>
              <li>
                <a (click)="(null)">2</a>
              </li>
              <li>
                <a (click)="(null)">3</a>
              </li>
              <li>
                <a (click)="(null)">4</a>
              </li>
              <li>
                <a (click)="(null)">5</a>
              </li>
              <li>
                <a (click)="(null)"><i class="fa fa-chevron-right"></i></a>
              </li>
            </ul>
            &nbsp; &nbsp;
            <ul class="pagination pagination-alt pagination-lg">
              <li>
                <a (click)="(null)"><i class="fa fa-angle-left"></i></a>
              </li>
              <li>
                <a (click)="(null)">1</a>
              </li>
              <li>
                <a (click)="(null)">2</a>
              </li>
              <li>
                <a (click)="(null)">3</a>
              </li>
              <li class="active">
                <a (click)="(null)">4</a>
              </li>
              <li>
                <a (click)="(null)">5</a>
              </li>
              <li>
                <a (click)="(null)"><i class="fa fa-angle-right"></i></a>
              </li>
            </ul>
          </div>
          <div class="text-center">
            <ul class="pagination">
              <li>
                <a (click)="(null)"><i class="fa fa-arrow-left"></i></a>
              </li>
              <li>
                <a (click)="(null)">1</a>
              </li>
              <li class="active">
                <a (click)="(null)">2</a>
              </li>
              <li>
                <a (click)="(null)">3</a>
              </li>
              <li>
                <a (click)="(null)">4</a>
              </li>
              <li>
                <a (click)="(null)">5</a>
              </li>
              <li>
                <a (click)="(null)"><i class="fa fa-arrow-right"></i></a>
              </li>
            </ul>
            &nbsp; &nbsp;
            <ul class="pagination pagination-alt">
              <li>
                <a (click)="(null)"><i class="fa fa-angle-left"></i></a>
              </li>
              <li>
                <a (click)="(null)">1</a>
              </li>
              <li>
                <a (click)="(null)">2</a>
              </li>
              <li>
                <a (click)="(null)">3</a>
              </li>
              <li class="active">
                <a (click)="(null)">4</a>
              </li>
              <li>
                <a (click)="(null)">5</a>
              </li>
              <li>
                <a (click)="(null)"><i class="fa fa-angle-right"></i></a>
              </li>
            </ul>
          </div>
          <div class="text-center">
            <ul class="pagination pagination-sm">
              <li>
                <a (click)="(null)"><i class="fa fa-angle-left"></i></a>
              </li>
              <li>
                <a (click)="(null)">1</a>
              </li>
              <li>
                <a (click)="(null)">2</a>
              </li>
              <li class="active">
                <a (click)="(null)">3</a>
              </li>
              <li>
                <a (click)="(null)">4</a>
              </li>
              <li>
                <a (click)="(null)">5</a>
              </li>
              <li>
                <a (click)="(null)"><i class="fa fa-angle-right"></i></a>
              </li>
            </ul>
            &nbsp; &nbsp;
            <ul class="pagination pagination-sm pagination-alt">
              <li>
                <a (click)="(null)">«</a>
              </li>
              <li>
                <a (click)="(null)">1</a>
              </li>
              <li>
                <a (click)="(null)">2</a>
              </li>
              <li class="active">
                <a (click)="(null)">3</a>
              </li>
              <li>
                <a (click)="(null)">4</a>
              </li>
              <li>
                <a (click)="(null)">5</a>
              </li>
              <li>
                <a (click)="(null)">»</a>
              </li>
            </ul>
          </div>
          <div style="width:200px; margin:0 auto">
            <ul class="pager">
              <li class="previous disabled">
                <a (click)="(null)">&larr; Older</a>
              </li>
              <li class="next">
                <a (click)="(null)">Newer &rarr;</a>
              </li>
            </ul>
          </div>

        </div>

      </div>

    </div>
    <!-- end row -->

  </sa-widgets-grid>


  <!-- Modal -->


  <div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
       aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)="lgModal.hide()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">Large modal</h4>
        </div>
        <div class="modal-body">

          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Title" required>
              </div>
              <div class="form-group">
                <textarea class="form-control" placeholder="Content" rows="5" required></textarea>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="category"> Category</label>
                <select class="form-control" id="category">
                  <option>Articles</option>
                  <option>Tutorials</option>
                  <option>Freebies</option>
                </select>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="tags"> Tags</label>
                <input type="text" class="form-control" id="tags" placeholder="Tags">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="well well-sm well-primary">
                <form class="form form-inline " role="form">
                  <div class="form-group">
                    <input type="text" class="form-control" value="" placeholder="Date" required>
                  </div>
                  <div class="form-group">
                    <select class="form-control">
                      <option>Draft</option>
                      <option>Published</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <button type="submit" class="btn btn-success btn-sm">
                      <span class="glyphicon glyphicon-floppy-disk"></span> Save
                    </button>
                    <button type="button" class="btn btn-default btn-sm">
                      <span class="glyphicon glyphicon-eye-open"></span> Preview
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" (click)="lgModal.hide()">
            Cancel
          </button>
          <button type="button" class="btn btn-primary">
            Post Article
          </button>
        </div>
      </div>
    </div>
  </div>


</div>
